<template>
  <div class="box">
    <van-nav-bar @click-left="onClickLeft" title="学习日历" left-arrow></van-nav-bar>
    <Calender :firstDay="7" :courseDate="courseDate" @onCurDate="onCurDate" @onChangeDate="onChangeDate" @onClickDay="onClickDay"/>
    <div class="info">
      <span class="date">{{curDate}}</span>
      <span class="course-count">当天{{courseList.length}}节课</span>
    </div>
  </div>
</template>

<script>
import Calender from "@/components/Calendar";
import { schedule } from "@/request/api.js"
export default {
  data() {
    return {
      courseDate: [],
      courseList: [],
      curDate: '4月12日',
    };
  },
  components: {
    Calender
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onCurDate(date) {
      this.requestCourseDate(date)
      this.requestCourse(date)
      this.changeCurDate(date)
    },
    onChangeDate(date) {
      this.requestCourseDate(date)
      this.courseList = []
      this.changeCurDate(date)
    },
    onClickDay(date) {
      this.requestCourse(date)
      this.changeCurDate(date)
    },
    // other
    changeCurDate(date) {
      const ary = date.split('-')
      this.curDate = ary[1] + '月' + ary[2] + '日'
    },
    requestCourseDate(date) {
      // schedule({date: date}).then(res => {
      //   console.log(res);
      //   // this.courseDate = []
      //   // for (const i in data) {
      //   //   if (!data[i]) continue
      //   //   this.courseDate.push(data[i])
      //   // }
      // })
    },
    requestCourse(date) {
      // 解决浏览器兼容问题，chrome浏览器可以识别 '2019-8-1' 格式，但是safari无法识别；'2019/8/1' 格式才是兼容的
      date = date.replace(/-/g, '/')
      const timestamp = parseInt(new Date(date).getTime() / 1000)
      // this.$http.get(`/api/app/study/live/${timestamp}`).then(data => {
      //   this.courseList = data
      // })
    }
  }
};
</script>


<style lang="scss" scoped>
@import "@/assets/CSS/index.scss";
.box{
    height:100%;
    background: #ffffff;
}
.info {
  padding: 0 0 20px 20px;
  .date {
    font-size: 20px;
    color: $theme_color;
    margin-right: 30px;
  }
  .course-count {
    font-size: 16px;
    color: #8c8c8c;
  }
}
</style>